目前預計的功能還少了搜尋城市，並且顯示該城市的天氣資訊，不過搜尋的部分應該放在哪裡比較好呢？思考了一下，可以運用 React Navigation 來實作一個 Bottom Tab Navigator 來切換頁面，並且在其中一個頁面放置搜尋功能。

React Navigation

React Navigation 是 React Native 生態系中最受歡迎的路由和導航套件之一。它提供了一系列功能強大的元件和 API，使開發人員能夠輕鬆地實現各種導航模式，包括 Stack、Drawer 和 Tab Navigation。React Navigation 也可以高度客製化，這使得開發者可以實現出各式與原生應用相似的流暢和高效的導航體驗。

安裝 React Navigation

第一個步驟先按照以下流程安裝：

$ npm install @react-navigation/native

$ npx expo install react-native-screens react-native-safe-area-context

$ npm install @react-navigation/bottom-tabs

建立一個新畫面

先整理一下專案中的 src 資料夾，新增一個存放畫面的資料夾 screens，現在的資料夾結構應該是這樣：

- src
  |- components
  |- store
  |- config
  |- screens
- App.tsx

接著在 screens 資料夾中新增一個 Search.tsx。

新增一個畫面存放目前的主畫面

由於會有一個切換畫面的部分，所以先把目前 App.tsx 中的畫面抽出來，並且放在 screens 資料夾中的一個新增檔案 Home.tsx。

建立一個 Bottom Tab Navigator

接著在 App.tsx 中建立一個 Bottom Tab Navigator，並且將 Home 和 Search 畫面放入其中：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { NavigationContainer } from '@react-navigation/native'
import Home from './src/screens/Home'
import Search from './src/screens/Search'

const Tab = createBottomTabNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name='Home' component={Home} />
        <Tab.Screen name='Search' component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

這裡使用 createBottomTabNavigator 來建立一個 Bottom Tab Navigator，並且將 Home 和 Search 畫面放入其中。 Tab.Navigator 中的 name 會是我們在切換畫面時使用的名稱，而 component 則是要顯示的畫面。

現在的畫面會是這樣：

雖然下面確實是有兩個 Tab 的 Navigator，不過我不想要上面的 Header，所以要把它關掉。

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator screenOptions={{
        headerShown: false // 關閉 Header
      }}>
        <Tab.Screen name='Home' component={Home} />
        <Tab.Screen name='Search' component={Search} />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

這樣就可以把 Header 關掉了。